{extend name="common/common" /}

{block name="style"}
<style type="text/css">
.container-fluid .btn.btn-sm{
    float: right;
    margin-left: 10px;
}
</style>
{/block}

{block name="content"}
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="ibox float-e-margins">
        <div class="ibox-title">
            <h5>附件列表</h5>
        </div>
        <div class="ibox-content">
            <div class="container-fluid">
				{if authCheck('product/addproconfig')}
                <button class="btn btn-info btn-sm addproconfig">添加配置</button>
				{/if}
            </div>
            <table id="cusTable">
                <thead>
                    <th class="text-center" data-field="id">ID</th>
                    <th class="text-center" data-field="name">配置名称</th>
                    <th class="text-center" data-field="values">配置值</th>
                    <th class="text-center" data-field="type_name">配置类型</th>
                    <th class="text-center" data-field="remark">配置描述</th>
                    <th class="text-center" data-field="operate">操作</th>
                </thead>
            </table>
        </div>
    </div>
</div>


<!-- 添加配置表单 -->
<div class="ibox-content" id="add_form_box" style="display: none">
    <form class="form-horizontal m-t addForm" method="post" action="{:url('product/addProConfig')}">
        <div class="form-group">
            <label class="col-sm-3 control-label">配置名称：</label>
            <div class="input-group col-sm-7">
                <input type="text" class="form-control" name="name" required="" aria-required="true">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">配置值：</label>
            <div class="input-group col-sm-7">
                <input type="text" class="form-control" name="values" required="" aria-required="true">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">配置类型：</label>
            <div class="input-group col-sm-7">
                <select name="type" class="form-control" lay-filter="type">
                    <option value="-1">请选择</option>
                    <option value="0">描述配置</option>
                    <option value="1">规格配置</option>
                    <option value="2">价格配置</option>
                </select>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">配置描述：</label>
            <div class="input-group col-sm-7">
                <textarea name="remark" class="layui-textarea"></textarea>
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-4 col-sm-offset-8">
                <button class="btn btn-primary" type="submit">提交</button>
            </div>
        </div>
    </form>
</div>
<!-- 添加配置表单 -->

<!-- 编辑配置表单 -->
<div class="ibox-content" id="edit_form_box" style="display: none">
    <form class="form-horizontal m-t editForm" method="post" action="{:url('product/editProConfig')}">
        <input type="hidden" class="form-control e_id" name="id" required="" aria-required="true">
        <div class="form-group">
            <label class="col-sm-3 control-label">配置名称：</label>
            <div class="input-group col-sm-7">
                <input type="text" class="form-control e_name" name="name" required="" aria-required="true">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">配置值：</label>
            <div class="input-group col-sm-7">
                <input type="text" class="form-control e_values" name="values" required="" aria-required="true">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">配置类型：</label>
            <div class="input-group col-sm-7">
                <select name="type" class="form-control e_type">
                    <option value="-1">请选择</option>
                    <option value="0">描述配置</option>
                    <option value="1">规格配置</option>
                    <option value="2">价格配置</option>
                </select>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">配置描述：</label>
            <div class="input-group col-sm-7">
                <textarea name="remark" class="layui-textarea e_remark"></textarea>
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-4 col-sm-offset-8">
                <button class="btn btn-primary" type="submit">提交</button>
            </div>
        </div>
    </form>
</div>
<!-- 编辑配置表单 -->
{/block}

{block name="script"}
<script type="text/javascript">
var IDs = '';
function initTable() {
    //先销毁表格
    $('#cusTable').bootstrapTable('destroy');
    //初始化表格,动态从服务器加载数据
    $("#cusTable").bootstrapTable({
        method: "get",  //使用get请求到服务器获取数据
        url: "./proconfig", //获取数据的地址
        striped: true,  //表格显示条纹
        pagination: true, //启动分页
        pageSize: 10,  //每页显示的记录数
        pageNumber:1, //当前第几页
        pageList: [5, 10, 15, 20, 25],  //记录数可选列表
        sidePagination: "server", //表示服务端请求
        paginationFirstText: "首页",
        paginationPreText: "上一页",
        paginationNextText: "下一页",
        paginationLastText: "尾页",
        queryParamsType : "undefined",
        queryParams: function queryParams(params) {   //设置查询参数
            var param = {
                pageNumber: params.pageNumber,
                pageSize: params.pageSize,
            };
            return param;
        },
        onLoadSuccess: function(res){  //加载成功时执行
            if(111 == res.code){
                window.location.reload();
            }
            layer.msg("加载成功", {time : 1000});
        },
        onLoadError: function(){  //加载失败时执行
            layer.msg("加载数据失败");
        }
    });
}

$(function(){
    //调用函数，初始化表格
    initTable();
    //当点击查询按钮的时候执行
    $("#search").bind("click", initTable);

    $('.addproconfig').on('click',function(){
        layer.open({
            title:'添加配置',
            type:1,
            area:['500px','420px'],
            content:$('#add_form_box')
        })
    });

    $('.addForm').on('submit',function(){
        var params = $('.addForm').serialize();
        $.post("{:url('product/addProConfig')}",params,function(res){
            if(res.code == 1){
                layer.closeAll();
                layer.alert(res.msg, {title: '友情提示', icon: 1, closeBtn: 0}, function(){
                    initTable();
                });
            }else{
                layer.alert(res.msg, {title: '友情提示', icon: 2});
            }
        });
        return false;
    });

    $('.editForm').on('submit',function(){
        var params = $('.editForm').serialize();
        $.post("{:url('product/editProConfig')}",params,function(res){
            if(res.code == 1){
                layer.closeAll();
                layer.alert(res.msg, {title: '友情提示', icon: 1, closeBtn: 0}, function(){
                    initTable();
                });
            }else{
                layer.alert(res.msg, {title: '友情提示', icon: 2});
            }
        });
        return false;
    });
});

function delProConfig(id){
    layer.confirm('确认删除此配置?', {icon: 3, title:'提示'}, function(index){
        //do something
        $.getJSON("{:url('product/delProConfig')}", {'id' : id}, function(res){
            if(1 == res.code){
                layer.alert(res.msg, {title: '友情提示', icon: 1, closeBtn: 0}, function(){
                    initTable();
                });
            }else if(111 == res.code){
                window.location.reload();
            }else{
                layer.alert(res.msg, {title: '友情提示', icon: 2});
            }
        });

        layer.close(index);
    })

}

function editProConfig(id){
    layer.confirm('确认编辑此配置?', {icon: 3, title:'提示'}, function(index){
        $.getJSON("{:url('product/editProConfig')}", {'id' : id}, function(res){
            $('.e_name').val(res.name);
            $('.e_values').val(res.values);
            $('.e_remark').val(res.remark);
            $('.e_id').val(res.id);
            var options = '<option value="-1">请选择</option>';
            if(res.type == 0){
                options = options
                        + '<option value="0" selected>描述配置</option>'
                        + '<option value="1">规格配置</option>'
                        + '<option value="2">价格配置</option>';
            } else if (res.type == 1){
                options = options
                        + '<option value="0">描述配置</option>'
                        + '<option value="1" selected>规格配置</option>'
                        + '<option value="2">价格配置</option>';
            } else if (res.type == 2){
                options = options
                        + '<option value="0">描述配置</option>'
                        + '<option value="1">规格配置</option>'
                        + '<option value="2" selected>价格配置</option>';
            }
            $('.e_type').html(options);
        });
        layer.open({
            title:'编辑配置',
            type:1,
            area:['500px','420px'],
            content:$('#edit_form_box')
        });
        layer.close(index);
    })

}
</script>
{/block}
